<style lang="less">
    @import "./VideoStream.less";
</style>
<template>
    <div :class="isFullScreen ? 'videoStream_fullScreen' : 'videoStream'">
        <!--头-->
        <div id="m-header" class="videoStream-header">
            <div class="videoStream-header-color">
                <M_Header v-on:logout="logoutPage()"></M_Header>
            </div>
        </div>
        <!--内容-->
        <div id="m-content" class="videoStream-content">
            <!--左侧，用户视频相关-->
            <div id="m-left" class="videoStream-content-left">
                <div class="videoViewTop">
                    <el-row>
                        <el-col :span="1" align="right">
                            <div>
                                <img src="../../assets/videoStream/xinhao.png" style="height: 15px;margin-top: 12px" alt="" />
                            </div>
                        </el-col>
                        <el-col :span="7" align="left">
                            <div style="margin-left: 8px;">
                                <p style="font-size: 12px;line-height: 35px;color: #fff;padding-top: 4px" >
                                    {{ videoCurrentTime }}
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <p style="font-size: 16px;line-height: 40px;color: #fff">
                                {{ confInfo.description ? "房间名称：" + confInfo.description : "房间号：" + roomId }}
                            </p>
                        </el-col>
                        <el-col :span="8"></el-col>
                    </el-row>
                </div>
                <div class="videoViewContent">
                    <div
                            v-for="(item, index) in videoList"
                            :style="index === 0 ? mainVideoStyle : otherVideoStyle"
                            class="videoDiv"
                            v-show="item.show"
                            :key="item.video"
                            @click="switchVideo(index)"
                            @dblclick="switchVideoAndFullScreen(index)"
                    >
                        <div class="videoExtra2">
                            <el-row>
                                <el-col :span="24" align="center">
                                    <div class="nameDiv">
                                        <p style="color: #ffffff">
                                            {{ item.name }}
                                        </p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <video
                                :id="item.video"
                                :muted="item.video === 'localVideo'"
                                autoplay
                                playsinline
                                loop
                                class="hidden"
                                style="display: none;background-color: #000000;width: 100%;height: 100%;"
                                v-show="item.extra.video !== false"
                        ></video>
                    </div>
                    <div
                            id="container-vr"
                            style="width: 100%;height: 100%;"
                            v-show="isVrDeveloped"
                    ></div>
                    <div
                            id="container-mark"
                            class="container-mark"
                            v-show="showMarkDialog"
                            align="center"
                    >
                        <div
                                class="btnList"
                                align="left"
                                :style="{ top: MarkCanvasPaddingTop + 50 + 'px' }"
                        >
                            <button
                                    type="button"
                                    @click="closeMark($event)"
                                    class="btn-mark-close"
                            ></button>
                            <button
                                    type="button"
                                    @click="clearAllCanvas($event)"
                                    class="btn-mark-clearAll"
                                    style="margin-left: 10px"
                            ></button>
                            <button
                                    type="button"
                                    v-on:click.prevent.self="clearPreviousCanvas($event)"
                                    class="btn-mark-clearLast"
                                    style="margin-left: 10px"
                            ></button>
                        </div>
                        <DashBoard
                                :style="{ marginTop: MarkCanvasPaddingTop + 'px' }"
                                ref="dashboard"
                                v-show="showMarkDialog"
                                :width="MarkCanvasWidth"
                                :height="MarkCanvasHeight"
                        ></DashBoard>
                    </div>
                </div>
                <div class="videoViewFooter">
                    <div style="width: 100%;">
                        <el-row>
                            <el-col :span="18">
                                <div align="left">
                                    <div align="center">
                                        <el-row style="margin-left: 40px">
                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="显示Qos信息"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button class="btn-bitrate" @click="switchQos()" >
                                                                <div v-if="isShowQosDialog">
                                                                    隐
                                                                </div>
                                                                <div v-else>
                                                                    显
                                                                </div>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="摄像头分辨率"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchSize()"
                                                            >
                                                                {{ btnStatus.sizeStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchSize"
                                                                class="showSwitchSizeClass"
                                                        >
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group
                                                                        v-model="btnStatus.sizeStatus">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="item.icon"
                                                                            v-for="item in constants.resList"
                                                                            :key="item.value"
                                                                            @change="switchSize(item.value)"
                                                                    >{{ item.label }}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="本端最大码率"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchBR()"
                                                            >
                                                                {{ btnStatus.bitrateStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchBR"
                                                                class="showSwitchBitClass">
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group
                                                                        v-model="btnStatus.bitrateStatus">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="item.icon"
                                                                            v-for="item in constants.brList"
                                                                            :key="item.value"
                                                                            @change="switchBR(item.value)"
                                                                    >{{ item.label }}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="会场分辨率"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchConfSize()"
                                                            >
                                                                {{ btnStatus.confSizeStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchConfSize"
                                                                class="showSwitchConfSizeClass"
                                                        >
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group
                                                                        v-model="btnStatus.confSizeStatus">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="item.icon"
                                                                            v-for="item in constants.resList"
                                                                            :key="item.value"
                                                                            @change="switchConfSize(item.value)"
                                                                    >{{ item.label }}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="会场最大码率"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchConfBR()"
                                                            >
                                                                {{ btnStatus.confBitrateStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchConfBR"
                                                                class="showSwitchConfBitClass">
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group
                                                                        v-model="btnStatus.confBitrateStatus">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="item.icon"
                                                                            v-for="item in constants.brList"
                                                                            :key="item.value"
                                                                            @change="switchConfBR(item.value)"
                                                                    >{{ item.label }}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="会场帧率"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchConfFPS()"
                                                            >
                                                                {{ btnStatus.confFPSStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchConfFPS"
                                                                class="showSwitchConfFpsClass">
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group
                                                                        v-model="btnStatus.confFPSStatus">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="item.icon"
                                                                            v-for="item in constants.fpsList"
                                                                            :key="item.value"
                                                                            @change="switchConfFPS(item.value)"
                                                                    >{{ item.label }}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>

                                            <el-col :span="2" >
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="切换画面布局"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div>
                                                            <button
                                                                    class="btn-bitrate"
                                                                    @click="showSwitchMcuLayout()"
                                                            >
                                                                {{ btnStatus.mcuLayoutStatus }}
                                                            </button>
                                                        </div>
                                                        <div
                                                                v-show="isShowSwitchMcuLayout"
                                                                class="showSwitchMcuLayoutClass">
                                                            <div style="margin: 20px 0  0 10px; text-align: left;">
                                                                <el-radio-group v-model="picmode">
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="0"
                                                                            :key="0"
                                                                            @change="switchMcuLayout()"
                                                                    >一大多小</el-radio>
                                                                    <el-radio
                                                                            class="radioClass"
                                                                            :label="1"
                                                                            :key="1"
                                                                            @change="switchMcuLayout()"
                                                                    >等大</el-radio>
                                                                </el-radio-group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="屏幕共享"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <!--开启屏幕共享-->
                                                        <div
                                                                v-show="btnStatus.shareScreenStatus"
                                                                style="width: 100%;height: 100%"
                                                        >
                                                            <button
                                                                    @click="shareScreen()"
                                                                    class="btn-shareScreen-off"
                                                            ></button>
                                                        </div>
                                                        <div v-show="!btnStatus.shareScreenStatus">
                                                            <button
                                                                    @click="shareScreen()"
                                                                    class="btn-shareScreen-on"
                                                            ></button>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="麦克风"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <!--关闭静音-->
                                                        <div
                                                                v-show="!btnStatus.mikeStatus"
                                                                style="width: 100%;height: 100%"
                                                        >
                                                            <button
                                                                    @click="clickMike()"
                                                                    class="btn-mike-off"
                                                            ></button>
                                                        </div>
                                                        <div v-show="btnStatus.mikeStatus">
                                                            <button
                                                                    @click="clickMike()"
                                                                    class="btn-mike-on"
                                                            ></button>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="摄像头"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <!--开关摄像头-->
                                                        <div v-show="!btnStatus.publishStatus">
                                                            <button
                                                                    @click="clickPublish()"
                                                                    class="btn-publish-off"
                                                            ></button>
                                                        </div>
                                                        <div v-show="btnStatus.publishStatus">
                                                            <button
                                                                    @click="clickPublish()"
                                                                    class="btn-publish-on"
                                                            ></button>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2" v-show="!isSolo">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="切换布局"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div class="div-switchLayout">
                                                            <!--切换布局模式-->
                                                            <div>
                                                                <button
                                                                        @click="switchLayout()"
                                                                        :class="
                                                                        btnStatus.switchLayoutStatus
                                                                          ? 'btn-switchLayout-off'
                                                                          : 'btn-switchLayout-on'
                                                                          "
                                                                ></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2" v-show="!isSolo">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="全屏"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div class="div-switchLayout">
                                                            <!--切换全屏模式-->
                                                            <div>
                                                                <button
                                                                        @click="clickSwitchFullScreen(!isFullScreen)"
                                                                        :class="
                                                                            btnStatus.switchLayoutStatus
                                                                              ? 'btn-switchLayout-off'
                                                                              : 'btn-switchLayout-on'
                                                                          "
                                                                ></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2" >
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="加入房间"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <div class="div-switchLayout">
                                                            <!--切换全屏模式-->
                                                            <div>
                                                                <button
                                                                        @click="addAuxiConnection()"
                                                                        class="btn-vr-off"
                                                                ></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="2" v-show="isSolo">
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        content="标记"
                                                        placement="top"
                                                >
                                                    <div class="btnShow">
                                                        <!--关闭静音-->
                                                        <div
                                                                v-show="btnStatus.markStatus"
                                                                style="width: 100%;height: 100%"
                                                        >
                                                            <button
                                                                    @click="closeMark($event)"
                                                                    class="btn-mark-on"
                                                            ></button>
                                                        </div>
                                                        <div v-show="!btnStatus.markStatus">
                                                            <button
                                                                    @click="openMark()"
                                                                    class="btn-mark-off"
                                                            ></button>
                                                        </div>
                                                    </div>
                                                </el-tooltip>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div style="height: 40px" class="el-col el-col-6">
                                    <el-tooltip
                                            class="item"
                                            effect="dark"
                                            content="全景"
                                            placement="top"
                                    >
                                        <button
                                                @click="switchVrDeveloped()"
                                                type="button"
                                                class="btn-vr"
                                        ></button>
                                    </el-tooltip>
                                </div>
                                <div align="right" style="height: 40px">
                                    <div style="height: 40px" class="el-col el-col-6">
                                        <button class="btn-stopStream" @click="stopStream()"></button>
                                    </div>
                                    <div style="height: 40px" class="el-col el-col-6">
                                        <button class="btn-quitRoom" @click="leaveRoom()"></button>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <!--右侧，用户会议相关-->
            <div id="m-right" class="videoStream-content-right">
                <div style="width:100%">
                    <div class="tabPane-confInfo" align="center">
                        <el-tabs
                                type="border-card"
                                stretch
                                v-model="activeTabs"
                                @tab-click="tabClick"
                                style="width: 100%;height: 100%"
                        >
                            <el-tab-pane
                                    label="会议成员"
                                    name="1"
                                    style="height: calc(100vh - 103px)"
                            >
                                <div style="padding:20px">
                                    <draggable element="span" v-model="userList"
                                               :options="{group:'title', animation:150}" :move="onUserListMove">
                                        <div
                                                v-for="(item, index) in userList"
                                                :key="index"
                                                style="height: 50px;width: 100%;margin-bottom: 10px"
                                        >
                                            <div style="width: 100%">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <img
                                                                src="../../assets/videoStream/xiaotou.png"
                                                                style="height: 30px;margin-top: 10px"
                                                                alt=""
                                                        />
                                                    </el-col>
                                                    <el-col :span="10" align="left">
                                                        <div>
                                                            <p
                                                                    style="font-size: 14px;color: #747474;line-height: 25px"
                                                            >
                                                                {{ item.userName }}
                                                            </p>
                                                        </div>
                                                        <div>
                                                            <p
                                                                    style="font-size: 12px;color: #747474;line-height: 25px"
                                                            >
                                                                显示序号：{{ item.position }}
                                                            </p>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="10" align="right">
                                                        <div style="margin-right: 10px">
                                                            <img
                                                                    :src="platformImg[item.platform]"
                                                                    alt=""
                                                                    style="margin-top: 15px"
                                                            />
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>

                                <div v-show="isShowQosDialog" class="dialog-qos">
                                    <div style="height: 40px">
                                        <el-row>
                                            <el-col :span="10">
                                                <p>qos数据</p>
                                            </el-col>
                                            <el-col :span="14"
                                            >
                                                <button @click="switchQos()" class="btn-stopQos">
                                                    X
                                                </button>
                                            </el-col
                                            >
                                        </el-row>
                                    </div>
                                    <div>
                                        <el-row v-for="(qos,index) in qosData" :key="index+1">
                                            <el-col :span="16" align="left">
                                                <p>{{qos.name}}</p>
                                            </el-col>
                                            <el-col :span="8" align="right">
                                                <p>{{ qos.value }}</p>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>

                            </el-tab-pane>
                            <el-tab-pane name="2" style="height: calc(100vh - 103px)">
                <span slot="label"
                >会议聊天
                  <div class="el-icon-new" v-show="newMsg"></div>
                    <!--&gt;会议聊天 <i class="icon-new" v-show="newMsg"></i>-->
                </span>
                                <div>
                                    <div
                                            :style="{ height: tabsMsgHeight }"
                                            class="msgContentList"
                                    >
                                        <div v-if="msgList.length === 0">
                                            <div style="padding-top: 20vh">
                                                <img
                                                        src="../../assets/videoStream/wuxiaoxi.png"
                                                        style="width: 140px;height: 122px"
                                                        alt="无文字消息"
                                                />
                                            </div>
                                            <div
                                                    style="padding-top: 20px;color: #d3d3d3;font-size: 12px"
                                            >
                                                <p>暂无文字消息</p>
                                            </div>
                                        </div>
                                        <div>
                                            <div v-for="(item, index) in msgList" :key="index">
                                                <div v-if="item.name !== name" style="padding: 10px">
                                                    <el-row>
                                                        <el-col :span="24" align="left">
                                                            <div class="icon-user-left">
                                                                <p style="line-height: 30px;text-align: left">
                                                                    {{ item.name }}
                                                                </p>
                                                            </div>
                                                            <div class="msgContentClass">
                                                                <p
                                                                        style="word-break:break-word;color: #FFF;display:inline-block;"
                                                                >
                                                                    {{ item.content }}
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div v-else style="padding: 10px">
                                                    <el-row>
                                                        <el-col :span="24" align="right">
                                                            <div class="icon-user-right">
                                                                <p style="line-height: 30px">
                                                                    {{ item.name }}
                                                                </p>
                                                            </div>
                                                            <div
                                                                    style="text-align: left;background-color: #2992FD;margin-right: 2vw"
                                                                    class="msgContentClass"
                                                            >
                                                                <p
                                                                        style="word-break:break-word;color: #FFF;display:inline-block;"
                                                                >
                                                                    {{ item.content }}
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <el-row>
                                            <el-col :span="18">
                                                <el-input
                                                        v-model="sendMsgContent"
                                                        placeholder="请输入文本消息"
                                                        maxlength="50"
                                                        style="margin-left: 20px"
                                                        @keyup.enter.native="sendMsg"
                                                ></el-input>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button @click="sendMsg()" style="width: 80px"
                                                >发送
                                                </el-button
                                                >
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="3" style="height: calc(100vh - 103px)">
                <span slot="label"
                >摄像头列表
                  <div class="el-icon-new" v-show="newFile"></div>
                </span>
                                <div>
                                    <div
                                            style="border-bottom:1px solid #D4D4D4;word-break:break-word;height: 80px"
                                    >
                                        <div
                                                align="left"
                                                style="margin: 0 0 0 20px;padding-top: 20px"
                                        >
                                            <el-button
                                                    @click="refreashCamera()"
                                            >刷新
                                            </el-button>
                                        </div>
                                    </div>
                                    <div class="fileListClass">
                                        <div v-for="item in cameraList" :key="item.account">
                                            <el-row>
                                                <el-col :span="4">
                                                    <!--{{ item.fileType }}-->
                                                    <img
                                                            :src="cameraStatusList[item.status]"
                                                            style="height:40px;"
                                                            alt=""
                                                    />
                                                </el-col>
                                                <el-col :span="15" align="left">
                                                    <div
                                                            style="width: 14vw;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;"
                                                    >
                                                        <p style="line-height: 40px;text-align: left;">
                                                            {{ item.account }}
                                                        </p>
                                                    </div>
                                                </el-col>
                                                <el-col :span="5">
                                                    <div v-if="item.status === 0 || item.status === 1">
                                                        <el-button @click="inviteCamera(item.account)"
                                                        >推流
                                                        </el-button
                                                        >
                                                    </div>
                                                    <div v-else>
                                                        <el-button @click="byeCamera(item.account)"
                                                        >停止推流
                                                        </el-button
                                                        >
                                                    </div>


                                                    <!--<el-button-->
                                                    <!--@click="deleteFile(item.id)"-->
                                                    <!--:disabled="item.createBy !== name"-->
                                                    <!--&gt;-->
                                                    <!--删除-->
                                                    <!--</el-button>-->
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="窗口选择" :visible.sync="sourecDialogVisible" width="80%" center>
            <el-radio-group v-model="sourecId" v-for="source in sourceList" :key="source.id">
                <el-radio :label="source.id"><img :src="source.thumbnail.toDataURL()" :title="source.name" style="margin-top: 10px"></el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sourceCancel">取 消</el-button>
                <el-button type="primary" @click="sourceConfirm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import M_Header from "@/components/Header1";
    import * as THREE from "../../../public/js/three.js";
    import {VR} from "../../../public/js/mxreality.js";
    import DashBoard from "@/components/DashBoard.vue";
    import draggable from "vuedraggable";

    const tvvsdk_constants = require("../../../public/js/sdk/tvvsdk_constants.js");
    let vr;
    let container;
    let renderer;

    let tvvssdk;
    let MLog = "---------MLog---------"
    let TAG = "VideoStream---------";
    let time2 = null;
    let qosIntervalId = -1;
    let roomIntervalId = -1;
    export default {
        name: "VideoStreamMcu",
        created() {
            let _this = this;
            tvvssdk = this.$tvvssdk;
            //初始化SDK
            let options = {
                // websocketurl: 'wss://10.0.0.125:2237/websocket', // ws信令服务URL
                // oamurl: 'https://10.0.0.125:2237', // 管理服务URL
                // stunurl: 'stun:10.0.0.125:2231' // stun服务器地址
                websocketurl: 'wss://meeting.zwan.com.cn:2237/websocket', // ws信令服务URL
                oamurl: 'https://meeting.zwan.com.cn:2237', // 管理服务URL
                stunurl: 'stun:stun.zwan.com.cn:2231' // stun服务器地址
                // websocketurl: 'ws://113.207.109.120:40002/websocket', // websocket信令服务URL
                // oamurl: 'https://113.207.109.120:40004', // 管理服务URL
                // stunurl: 'stun:113.207.109.120:40000' // stun服务器地址
                // websocketurl: 'wss:///meeting.cqu.edu.cn:30005/websocket', // ws信令服务URL
                // oamurl: 'https:///meeting.cqu.edu.cn:30005', // 管理服务URL
                // stunurl: 'stun:/meeting.cqu.edu.cn:2331' // stun服务器地址
                // websocketurl: 'wss://topvision-cv.com:2337/websocket', // ws信令服务URL
                // oamurl: 'https://topvision-cv.com:2337', // 管理服务URL
                // stunurl: 'stun:topvision-cv.com:2331' // stun服务器地址
            };

            tvvssdk.init(options, function (res) {
                if (res.success) {
                    console.log(res.msg);
                } else {
                    alert(res.msg);
                }
            });
            if (this.$route.query.roomId) {
                this.roomId = this.$route.query.roomId;
            } else {
                alert("房间号不存在");
                this.goHome();
                return;
            }
            if (this.$route.query.name !== undefined && this.$route.query.name !== null) {
                this.name = this.$route.query.name.toString();
            } else {
                alert("用户名不存在");
                this.goHome();
                return;
            }
            this.$store.dispatch("DeviceInfo");
            this.deviceInfo = this.$store.state.deviceInfo;

            if (this.deviceInfo.confmode === tvvsdk_constants.confModeList[0].value ||
                this.deviceInfo.confmode === tvvsdk_constants.confModeList[1].value) {
                this.isSolo = true;  //mcu 单窗口
            } else {
                this.isSolo = false; //sfu 多窗口
            }

            tvvsdk_constants.resList.forEach(function (res, index, arr) {
                if (_this.deviceInfo.size === res.value) {
                    _this.btnStatus.sizeStatus = res.icon;
                }
            });

            tvvsdk_constants.brList.forEach(function (br, index, arr) {
                if (_this.deviceInfo.maxbr === br.value) {
                    _this.btnStatus.bitrateStatus = br.icon;
                }
            });

            tvvsdk_constants.resList.forEach(function (res, index, arr) {
                if (_this.deviceInfo.confsize === res.value) {
                    _this.btnStatus.confSizeStatus = res.icon;
                    _this.confSize = res.value;
                }
            });

            tvvsdk_constants.brList.forEach(function (br, index, arr) {
                if (_this.deviceInfo.confmaxbr === br.value) {
                    _this.btnStatus.confBitrateStatus = br.icon;
                    _this.confBr = br.value;
                }
            });

            tvvsdk_constants.fpsList.forEach(function (fps, index, arr) {
                if (_this.deviceInfo.conffps === fps.value) {
                    _this.btnStatus.confFPSStatus = fps.icon;
                    _this.confFPS = fps.value;
                }
            });

            tvvssdk.createConnection(function (res) {
                if (res.success) {
                    _this.sessionIds.main = res.sessionid
                    _this.joinRoom(res.sessionid, _this.roomId, _this.name);
                } else if (res === 'screen stop') {
                    _this.shareScreen()
                    tvvssdk.streamStop(_this.sessionIds.main)
                } else if (res === 'screen denied') {
                    _this.shareScreen()
                    tvvssdk.streamStop(_this.sessionIds.main)
                    _this.btnStatus.shareScreenStatus = false
                }  else if (res === 'Camera call failed') {
                    _this.shareScreen()
                    tvvssdk.streamStop(_this.sessionIds.main)
                    _this.btnStatus.shareScreenStatus = false
                } else if (res === 'screen start' && _this.deviceInfo.camera === "-1") {
                    _this.btnStatus.shareScreenStatus = true
                } else if (res.isSources) {
                    _this.sourceList = res.sources
                    _this.sourceCallback = res.sourcesCallback
                    _this.sourecDialogVisible = true
                    console.log('isSources==============', res)
                    console.log('isSources==============', _this.sourceList)
                    console.log('isSources==============', _this.sourceCallback)
                }    else if (res.disconnected) {
                    console.log("createConnection--------", "ICE连接失败：正在重新加入" )
                    tvvssdk.streamStop(res.sessionid)
                    _this.StreamStart(res.sessionid);
                } else {
                    console.log('createConnection==============', res.msg)
                }
            });
        },
        components: {
            M_Header,
            DashBoard,
            draggable
        },

        data() {
            return {
                roomId: "",
                name: "",
                videoCurrentTime: "00:00:00",
                authTime: 0,
                authTimeTimer: "",
                mySelfRoomId: "",
                tag: "videostream",
                userList: [],
                allowswitch: false,
                userindeList: {},
                cameraList: [],
                confMemberNum: 0,
                deviceInfo: [],
                streaming: false,
                picmode: 0,
                picnum: 4,
                confInfo: {
                    description: ""
                },
                videoList: [
                    {
                        video: "video0",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video1",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video2",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video3",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video4",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video5",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video6",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video7",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    },
                    {
                        video: "video8",
                        stream: null,
                        name: "",
                        index: "",
                        show: false,
                        sessionid: -1,
                        extra: {}
                    }
                ],
                isFullScreen: false,
                HisIsFull: false,
                isSolo: false, // 0 单窗口
                videoLayout: 0, //0一大多小 1等大
                mainVideoStyle: {width: "33.33%", height: "calc(33.33% - 4px)"},
                otherVideoStyle: {width: "33.33%", height: "calc(33.33% - 4px)"},
                tabsHeight: "calc(100vh - 101px)", // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
                tabsMsgHeight: "calc(100vh - 150px)", // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
                isShowQosDialog: false,
                isShowSwitchSize: false,
                isShowSwitchBR: false,
                isShowSwitchConfSize: false,
                isShowSwitchConfBR: false,
                isShowSwitchConfFPS: false,
                isShowSwitchMcuLayout: false,
                qosData: "",
                confSize: "",
                confBr: tvvsdk_constants.brList[3].value,
                confFPS: 10,
                btnStatus: {
                    switchLayoutStatus: false,
                    switchMcuLayoutStatus: false,
                    publishStatus: false,
                    mikeStatus: false,
                    shareScreenStatus: false,
                    sizeStatus: "?",
                    bitrateStatus: "?",
                    confSizeStatus: "?",
                    confBitrateStatus: "?",
                    confFPSStatus: "?",
                    mcuLayoutStatus: "多",
                    markStatus: false
                },
                activeTabs: "1",
                platformImg: [
                    require("../../assets/videoStream/platform/yanjing.png"),
                    require("../../assets/videoStream/platform/anzhuo.png"),
                    require("../../assets/videoStream/platform/diannao.png"),
                    require("../../assets/videoStream/platform/pingguo.png"),
                    require("../../assets/videoStream/platform/pingguo.png"),
                    require("../../assets/videoStream/platform/diannao.png")
                ],
                msgList: [],
                sendMsgContent: "",
                cameraStatusList: {
                    0: require("../../assets/videoStream/idle.png"),
                    1: require("../../assets/videoStream/connecting.png"),
                    2: require("../../assets/videoStream/connecting.png"),
                    3: require("../../assets/videoStream/busy.png"),
                },
                sourecDialogVisible: false,
                sourecId: '',
                sourceList: [],
                fileIconList: {
                    pdf: require("../../assets/fileIcon/pdf.png"),
                    jpg: require("../../assets/fileIcon/img.png"),
                    png: require("../../assets/fileIcon/img.png"),
                    jpeg: require("../../assets/fileIcon/img.png"),
                    gif: require("../../assets/fileIcon/img.png"),
                    mp4: require("../../assets/fileIcon/video.png"),
                    "3gp": require("../../assets/fileIcon/video.png"),
                    mav: require("../../assets/fileIcon/video.png"),
                    doc: require("../../assets/fileIcon/word.png"),
                    docx: require("../../assets/fileIcon/word.png"),
                    ppt: require("../../assets/fileIcon/ppt.png")
                },
                fileType:
                    ".doc,.docx,.pdf,.png,.jpg,.jpeg,.bpm,.gif,.svg,.wbp,.mp4,.mav,.rmvb,.rm,.flv,.3gp,.ppt,.pptx",
                uploadFiles: "",
                uploadFileName: "",
                uploadingFile: [],
                fileList: [],
                isUpload: false,
                newMsg: false,
                newFile: false,
                fullscreenHeight: "",
                fullscreenWidth: "",
                isVrDeveloped: false,
                showMarkDialog: false,
                MarkCanvasWidth: 0,
                MarkCanvasHeight: 0,
                MarkCanvasPaddingTop: 0,
                constants: tvvsdk_constants,
                sessionId: "",
                sourceCallback: "",
                sessionIds: {
                    main: '',
                    auxi: []
                },
                videoIndex: 2
            };
        },

        mounted() {
            if (window.history && window.history.pushState) {
                // 向历史记录中插入了当前页
                history.pushState(null, null, document.URL);
                window.addEventListener("popstate", this.goBack, false);
            }
            this.queryFiles();
            //this.getSender();
            this.getAuthCode();
            // let video = document.getElementById('localVideo')
            // video.addEventListener("timeupdate", function() {
            // 	_this.videoCurrentTime = _this.$secondsFormat(Math.ceil(this.currentTime));
            // })
        },
        destroyed() {
            window.removeEventListener("popstate", this.goBack, false);
            if (qosIntervalId !== -1) {
                window.clearInterval(qosIntervalId);
                qosIntervalId = -1;
            }
            if (roomIntervalId !== -1) {
                window.clearInterval(roomIntervalId);
                roomIntervalId = -1;
            }
        },
        methods: {
            switchQos() {
                this.isShowQosDialog = !this.isShowQosDialog;
                if (this.isShowQosDialog) {
                    if (qosIntervalId !== -1) {
                        window.clearInterval(qosIntervalId);
                        qosIntervalId = -1;
                    }
                }
                if (this.isShowQosDialog) {
                    this.$options.methods.showQos(this);
                } else {
                    this.$options.methods.stopQos();
                }
            },
            // 显示QOS
            showQos(_this) {
                qosIntervalId = window.setInterval(() => {
                    if (_this.videoList[0].sessionid !== -1) {

                        tvvssdk.getQos(_this.videoList[0].sessionid, function (result) {
                            if (result.success) {
                                _this.qosData = result.report;
                            }
                        });
                    }
                }, 1000);
            },
            stopQos() {
                window.clearInterval(qosIntervalId);
                qosIntervalId = -1;
            },
            test(e) {
                console.log(TAG, e);
            },
            goBack() {
                tvvssdk.leaveRoom();
                sessionStorage.clear();
                clearInterval(this.authTimeTimer);
                setTimeout(function () {
                    //延迟退出,避免没挂断前就退出了
                    window.history.back();
                }, 300);
            },
            // 自己加入会议，接收SDK的回调
            joinRoom(sessionid, roomId, name) {
                let _this = this;
                let callbacks = {
                    onjoined: function (name) {
                        console.log(TAG, name + " has joined");
                        _this.StreamStart(sessionid);
                        _this.startQueryRoom(sessionid,roomId, name);
                    },
                    onleave: function (name, rfindex) {
                        console.log(TAG, name + " has leaved");
                    },
                    ondata: function (sender, platform, data) {
                        console.log(MLog);
                        console.log(TAG, data);
                        _this.addMsgList(sender, data);
                        _this.handleParseMessage(sessionid, roomId,sender, platform, data)
                    },
                };
                tvvssdk.joinRoom(sessionid, roomId, name, callbacks);
            },
            // 解释 全局消息
            async handleParseMessage(sessionid, roomId,sender, platform, dataStr) {
                try {
                    console.log('handleParseMessage', dataStr)
                    const data = JSON.parse(dataStr)
                    const _this = this
                    const status = data.status || ''
                    switch (status) {
                        // 有人加入
                        case "joined":
                            // 不拉取自己
                            if (data.name === this.name) return

                            setTimeout(async () => {
                                this.dynamicLayout();
                            }, 1000)
                            break;
                        // 有人退出
                        case "hangup":
                            console.log("hangup");
                            this.videoIndex --
                            break;
                    }
                } catch (e) {
                }
            },

            StreamStart(sessionId) {

                let options = {
                    audio: {},   //音频参数
                    video: {},   //视频参数
                    conf: {}
                };
                //设置音频参数
                options.audio.sendaudio = this.deviceInfo.microphone !== "0";   //未选择”禁用麦克风“
                options.audio.recvaudio = true;
                options.audio.publishaudio = options.audio.sendaudio;
                options.audio.subscribeaudio = options.audio.recvaudio;
                options.audio.audioindeviceid = this.deviceInfo.microphone;
                if (this.deviceInfo.microphone !== "0") {
                    this.btnStatus.mikeStatus = true;
                }
                //设置视频参数
                options.video.sendvideo = this.deviceInfo.camera !== "0";  //未选择”禁用摄像头“
                options.video.recvvideo = true;
                options.video.deviceid = this.deviceInfo.camera;
                options.video.publishvideo = options.video.sendvideo;
                options.video.subscribevideo = options.video.recvvideo;
                options.video.size = this.deviceInfo.size;
                if (this.deviceInfo.camera === "-1") {
                    options.video.type = "screen";
                    this.btnStatus.shareScreenStatus = true;
                } else if (this.deviceInfo.camera === "0") {
                    options.video.type = "camera";
                    this.btnStatus.publishStatus = false;
                } else {
                    this.btnStatus.publishStatus = true;
                    options.video.type = "camera";
                }

                //设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size;
                options.conf.fps = this.deviceInfo.fps;
                options.conf.confsize = this.deviceInfo.confsize;
                options.conf.confminbr = this.deviceInfo.confminbr;
                options.conf.confmaxbr = this.deviceInfo.confmaxbr;
                options.conf.confinitbr = this.deviceInfo.confmaxbr;
                options.conf.conffps = this.deviceInfo.conffps;
                options.conf.mode = this.deviceInfo.confmode;
                options.conf.picmode = 0;  //0：一大多小， 1：等大

                let _this = this;
                let callbacks = {
                    onlocalstream: function (sessionId, stream, extra) {
                    },
                    onremotestream: function (sessionId, stream, extra) {
                        console.log(TAG, 'stream:pluginid:'+stream.pluginid);
                        console.log(TAG, "onremotestream");
                        let index = 0;
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = _this.roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        _this.getConfMemberNum();
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 200);
                    },
                };
                tvvssdk.streamStart(sessionId, options, this.roomId, callbacks);
                this.streaming = true;

            },
            goHome() {
                this.$router.push({
                    name: "Home"
                });
            },
            logoutPage() {
                this.leaveRoom();
                this.$store.dispatch("UserLogout");
                this.$router.push({
                    path: "/"
                });
            },
            // 主流程
            // 获取sender
            // getSender() {
            //     this.$store.dispatch("Sender");
            //     this.sender = this.$store.state.sender;
            //     if (this.sender !== null) {
            //         //this.queryConfMemberInfo();
            //         this.queryConfInfo();
            //     } else {
            //         this.$message.error("账号信息异常，请重新登陆");
            //     }
            // },
            // queryConfInfo() {
            //     let url = "/rtc/queryConfInfo/?room=";
            //     let params = {};
            //     this.axios.hGet(url + this.roomId, params, response => {
            //         if (response.status === 200) {
            //             this.confInfo = response.data;
            //         }
            //     });
            // },

            startQueryRoom(sessionid, roomid, name) {
                let _this = this;
                if (roomIntervalId !== -1) {
                    window.clearInterval(roomIntervalId);
                    roomIntervalId = -1;
                }
                roomIntervalId = window.setInterval(() => {
                    tvvssdk.queryRoom(sessionid, roomid, {
                        success: function (result) {
                            //console.log(TAG, "queryConfMemberInfo succ:"+result);
                            _this.userList.length = 0;
                            if (roomid === result.room) {
                                result.participants.forEach(function (p, index, arr) {
                                    let user = {"userName": p.display, "position": p.position, "id": p.id};
                                    _this.userList.push(user);

                                });
                                _this.allowswitch = true;
                            }
                        },
                        error: function (msg) {
                            console.log(TAG, "queryConfMemberInfo error:" + msg);
                        }
                    });
                },2500)
            },

            onUserListMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;
                let temp = draggedElement.position;
                draggedElement.position = relatedElement.position;
                relatedElement.position = temp;
                // this.userList.forEach(function (user, index, array) {
                //     if(user.userName === relatedElement.userName){
                //         console.log(TAG, "onUserListMove: "+ user.userName + ": "+ user.position + "->"+draggedElement.position);
                //         user.position = draggedElement.position;
                //
                //     }
                //     if(user.userName === draggedElement.userName){
                //         console.log(TAG, "onUserListMove: "+ user.userName + ": "+ user.position + "->"+temp);
                //         user.position = relatedElement.position;
                //     }
                // })
                if (this.videoList[0].sessionid !== -1 && this.allowswitch) {
                    tvvssdk.compositeRoom(this.sessionIds.main, this.roomId, this.userList);
                    this.allowswitch = false;
                }
            },

            getConfMemberNum() {
                console.log(TAG, "this.confMemberNum");
                this.confMemberNum = 0;
                for (let index in this.videoList) {
                    console.log(TAG, this.videoList[index]);
                    if (
                        this.videoList[index].name !== null &&
                        this.videoList[index].name !== ""
                    ) {
                        this.confMemberNum = this.confMemberNum + 1;
                    }
                }
                // this.removeNullVideo();
            },
            // 根据视频流的index获取该流在视频中的位置
            getVideoListIndexByRemoteIndex(remoteIndex) {
                let i;
                for (i in this.videoList) {
                    if (remoteIndex === this.videoList[i].video) {
                        return i;
                    }
                }
            },
            // 根据用户的userName和platorm获取该流在视频中的位置
            getVideoListIndexByUserName(username, platform) {
                console.log(TAG, username);
                console.log(TAG, platform);
                let i;
                for (i in this.videoList) {
                    console.log(TAG,
                        username === this.videoList[i].name &&
                        String(platform) === String(this.videoList[i].extra.platform)
                    );
                    if (
                        username === this.videoList[i].name &&
                        String(platform) === String(this.videoList[i].extra.platform)
                    ) {
                        console.log(TAG, i);
                        return i;
                    }
                }
            },
            // 根据用户的userName和platorm获取该流的index
            getStreamIndexByUserName(username, platform) {
                console.log(TAG, username);
                console.log(TAG, platform);
                let i;
                for (i in this.videoList) {
                    console.log(TAG,
                        username === this.videoList[i].name &&
                        String(platform) === String(this.videoList[i].extra.platform)
                    );
                    if (
                        username === this.videoList[i].name &&
                        String(platform) === String(this.videoList[i].extra.platform)
                    ) {
                        console.log(TAG, this.videoList[i].index);
                        return this.videoList[i].index;
                    }
                }
            },
            // 有人离开，重新渲染
            leaveVideo(name, rfindex) {
                // this.queryConfMemberInfo();
                console.log(MLog);
                console.log(TAG, "离开后渲染画面");
                // console.log(this.tag, "onleave name=" + name + ",index=" + rfindex);
                // 判断移除的画面在什么位置
                let n = this.getVideoListIndexByRemoteIndex("remotevideo" + rfindex);
                this.videoList[n].stream = null;
                this.videoList[n].index = "";
                this.videoList[n].name = "";
                this.videoList[n].extra = {};
                while (n < 8) {
                    if (this.videoList[parseInt(n) + 1].stream !== null) {
                        this.switchData(this.videoList[n], this.videoList[parseInt(n) + 1]);
                    } else {
                        break;
                    }
                    n++;
                }
                console.log(TAG, this.videoList);
                console.log(TAG, this.confMemberNum);
                this.getConfMemberNum();
                setTimeout(this.reloadStream, 200);
            },
            removeNullVideo() {
                let index = 8;
                while (index > 0) {
                    if (
                        this.videoList[index].name !== "" &&
                        this.videoList[index - 1].name === ""
                    ) {
                        this.switchData(this.videoList[index], this.videoList[index - 1]);
                    }
                    index--;
                }
            },
            // 两两更换数据
            switchData(beforeList, afterList) {
                let beforeStream = beforeList.stream;
                let beforeIndex = beforeList.index;
                let beforeName = beforeList.name;
                let beforeVideo = beforeList.video;
                let beforeExtra = beforeList.extra;
                let afterStream = afterList.stream;
                let afterIndex = afterList.index;
                let afterName = afterList.name;
                let afterVideo = afterList.video;
                let afterExtra = afterList.extra;
                beforeList.stream = afterStream;
                beforeList.index = afterIndex;
                beforeList.name = afterName;
                beforeList.video = afterVideo;
                beforeList.extra = afterExtra;
                afterList.stream = beforeStream;
                afterList.index = beforeIndex;
                afterList.name = beforeName;
                afterList.video = beforeVideo;
                afterList.extra = beforeExtra;
            },
            // 切换画面到主画面
            // 单击
            switchVideo(index) {
                time2 && clearTimeout(time2);
                let _this = this;
                time2 = setTimeout(() => {
                    if (index !== 0) {
                        if (_this.videoList[index].stream !== null) {
                            _this.switchData(_this.videoList[0], _this.videoList[index]);
                            console.log(MLog);
                            console.log(TAG, _this.videoList);
                            // 先注销重新渲染画面，后续观察
                            // setTimeout(this.reloadStream, 200);
                        }
                    }
                    console.log(TAG, "click");
                }, 300);
            },
            // 主功能
            // 切換佈局
            switchLayout() {
                this.btnStatus.switchLayoutStatus = !this.btnStatus.switchLayoutStatus;
                if (this.videoLayout === 0) {
                    this.videoLayout = 1;
                    this.dynamicLayout();
                } else if (this.videoLayout === 1) {
                    this.videoLayout = 0;
                    this.dynamicLayout();
                }
                // this.btnUiShow();
                // 先注销，确认是否需要重新改渲染
                // setTimeout(this.reloadStream, 300);
            },

            //会场帧率选择dialog
            showSwitchMcuLayout() {
                this.isShowSwitchMcuLayout = !this.isShowSwitchMcuLayout;
            },
            // 切換佈局
            switchMcuLayout() {
                this.btnStatus.switchMcuLayoutStatus = !this.btnStatus.switchMcuLayoutStatus;
                if (this.picmode === 0) {
                    tvvssdk.mculayout(this.sessionIds.main, this.picmode, this.picnum);
                    this.btnStatus.mcuLayoutStatus = '多'
                } else if (this.picmode === 1) {
                    tvvssdk.mculayout(this.sessionIds.main, this.picmode, this.picnum);
                    this.btnStatus.mcuLayoutStatus = '等'
                }
                // this.btnUiShow();
                // 先注销，确认是否需要重新改渲染
                // setTimeout(this.reloadStream, 300);
            },
            // 重新渲染画面
            reloadStream() {
                let i;
                for (i in this.videoList) {
                    console.log(TAG, "渲染画面" + i);
                    tvvssdk.attachMediaStream(
                        document.getElementById(this.videoList[i].video),
                        this.videoList[i].stream
                    );
                }
            },
            // 重新渲染第一个画面，用于全屏
            reloadOneStream() {
                tvvssdk.attachMediaStream(
                    document.getElementById(this.videoList[0].video),
                    this.videoList[0].stream
                );
            },
            // 重新渲染指定index画面，用于屏幕尺寸发送变化时
            reloadIndexStream(index) {
                tvvssdk.attachMediaStream(
                    document.getElementById(this.videoList[index].video),
                    this.videoList[index].stream
                );
            },
            // 等大情況下动态调整video大小
            dynamicLayout() {
                console.log(TAG, this.confMemberNum);
                // this.confMemberNum = 9;
                if (this.isSolo) {
                    this.mainVideoStyle = {
                        width: "100%",
                        height: "calc(100% - 2px)"
                    };
                    this.otherVideoStyle = {
                        width: "1px",
                        height: "1px"
                    };
                } else {
                    if (this.videoLayout === 0) {
                        this.mainVideoStyle = {
                            width: "100%",
                            height: "85%"
                        };
                        this.otherVideoStyle = {
                            width: "12.5%",
                            height: "calc(15% - 8px)"
                        };
                    } else if (this.videoLayout === 1) {
                        if (this.confMemberNum === 1) {
                            this.mainVideoStyle = {
                                width: "100%",
                                height: "calc(100% - 2px)"
                            };
                            this.otherVideoStyle = {
                                width: "100%",
                                height: "calc(100% - 2px)"
                            };
                        } else if (this.confMemberNum === 2) {
                            this.mainVideoStyle = {
                                width: "50%",
                                height: "calc(100% - 2px)"
                            };
                            this.otherVideoStyle = {
                                width: "50%",
                                height: "calc(100% - 2px)"
                            };
                        } else if (this.confMemberNum === 3 || this.confMemberNum === 4) {
                            this.mainVideoStyle = {
                                width: "50%",
                                height: "calc(50% - 4px)"
                            };
                            this.otherVideoStyle = {
                                width: "50%",
                                height: "calc(50% - 4px)"
                            };
                        } else if (this.confMemberNum === 5 || this.confMemberNum === 6) {
                            this.mainVideoStyle = {
                                width: "33.33%",
                                height: "calc(50% - 4px)"
                            };
                            this.otherVideoStyle = {
                                width: "33.33%",
                                height: "calc(50% - 4px)"
                            };
                        } else if (this.confMemberNum === 7 || this.confMemberNum === 8) {
                            this.mainVideoStyle = {
                                width: "25%",
                                height: "calc(50% - 4px)"
                            };
                            this.otherVideoStyle = {
                                width: "25%",
                                height: "calc(50% - 4px)"
                            };
                        } else {
                            this.mainVideoStyle = {
                                width: "33.33%",
                                height: "calc(33.33% - 4px)"
                            };
                            this.otherVideoStyle = {
                                width: "33.33%",
                                height: "calc(33.33% - 4px)"
                            };
                        }
                    }
                }
                // this.confMemberNum=8
                // this.userList.length=9
            },
            // 双击
            switchVideoAndFullScreen(index) {
                time2 && clearTimeout(time2);
                console.log(TAG, "switchVideoAndFullScreen");
                if (!this.isSolo) {
                    if (index !== 0) {
                        if (this.videoList[index].stream !== null) {
                            this.switchData(this.videoList[0], this.videoList[index]);
                            //tvvssdk.getRemoteQos(index, function(res) {});
                        }
                    }

                    this.HisIsFull = this.isFullScreen;
                    this.clickSwitchFullScreen(true);
                    // this.reloadStream();
                    this.isSolo = !this.isSolo;
                    this.dynamicLayout();
                } else {
                    this.isSolo = !this.isSolo;
                    this.dynamicLayout();
                    if (!this.HisIsFull) {
                        this.clickSwitchFullScreen(false);
                    }
                }
            },

            // 菜单
            stopStream() {
                tvvssdk.streamStop(this.sessionIds.main);
                this.deviceInfo.camera = "0"
                this.deviceInfo.microphone = "0"
                this.streaming = false;
            },
            // 离开房间
            leaveRoom() {
                if (this.streaming) {
                    this.stopStream();
                }
                tvvssdk.leaveRoom(this.sessionIds.main);
                this.goHome();
            },
            // 菜单UI变化

            openMark() {
                let video = document.getElementById(this.videoList[0].video);
                let _this = this;
                var widthPercentage =
                    Math.floor((video.offsetWidth / video.videoWidth) * 1000) / 1000;
                var heightPercentage =
                    Math.floor((video.offsetHeight / video.videoHeight) * 1000) / 1000;
                if (widthPercentage > heightPercentage) {
                    this.MarkCanvasWidth = Math.floor(video.videoWidth * heightPercentage);
                    this.MarkCanvasHeight = video.offsetHeight;
                } else {
                    this.MarkCanvasWidth = video.offsetWidth;
                    this.MarkCanvasHeight = Math.floor(video.videoHeight * widthPercentage);
                    this.MarkCanvasPaddingTop =
                        (video.offsetHeight - this.MarkCanvasHeight) / 2;
                }

                this.showMarkDialog = true;
                this.btnStatus.markStatus = true;
                let options = {
                    selectedIcon: "Rectangle",
                    color: "#FF0000",
                    thickness: 5
                };
                tvvssdk.startMark(
                    _this.videoList[0].name,
                    _this.videoList[0].extra.platform,
                    this.MarkCanvasWidth,
                    this.MarkCanvasHeight,
                    options
                );
                console.log(TAG, this.MarkCanvasWidth);
                console.log(TAG, this.MarkCanvasHeight);
            },
            closeMark(event) {
                console.log(TAG, event);
                if (event) {
                    event.preventDefault();
                }
                tvvssdk.stopMark();
                this.btnStatus.markStatus = false;
                this.showMarkDialog = false;
                this.clearAllCanvas();
            },
            clearAllCanvas(event) {
                console.log(TAG, event);
                if (event) {
                    event.preventDefault();
                }
                let _this = this;
                tvvssdk.clearMark(
                    true,
                    _this.videoList[0].name,
                    _this.videoList[0].extra.platform
                );
            },
            clearPreviousCanvas(event) {
                if (event) {
                    event.preventDefault();
                }
                let _this = this;
                tvvssdk.clearMark(
                    false,
                    _this.videoList[0].name,
                    _this.videoList[0].extra.platform
                );
            },
            // 摄像头分辨率选择dialog
            showSwitchSize() {
                this.isShowSwitchSize = !this.isShowSwitchSize;
            },
            // 设置本地分辨率
            switchSize(resolution) {
                this.isShowSwitchSize = false;
                tvvssdk.setResolution(this.sessionIds.main, resolution, function (res) {
                    if (res.success) {
                        console.log(TAG, res);
                    } else {
                        if (res.message === "OverconstrainedError") {
                        }
                    }
                });
            },
            // 本地码率选择dialog
            showSwitchBR() {
                this.isShowSwitchBR = !this.isShowSwitchBR;
            },

            // 设置本地最大码率
            switchBR(br) {
                this.isShowSwitchBR = false;
                let _this = this;
                tvvssdk.setBitrate(this.sessionIds.main, br, function (res) {
                    if (res.success) {
                        _this.$message.warning("本地码率设置成功");
                        console.log(TAG, res);
                    } else {
                        _this.$message.warning("本地码率设置失败");
                    }
                });
            },


            // 会场分辨率选择dialog
            showSwitchConfSize() {
                this.isShowSwitchConfSize = !this.isShowSwitchConfSize;
            },
            // 设置会场分辨率
            switchConfSize(resolution) {
                this.isShowSwitchConfSize = false;
                this.confSize = resolution;
                let _this = this;
                tvvssdk.reconfigConf(this.sessionIds.main, this.roomId, this.confSize, this.confBr, this.confFPS, function (res) {
                    if (res.success) {
                        //最好设置下相对应的码率,360P 1000kbp/s   720 2000kbp/s 1080 3000 kbps/s
                        _this.$message.warning("重配置会场参数成功");
                        console.log(TAG, res);
                    } else {
                        _this.$message.warning("重配置会场参数失败");
                    }
                });
            },
            // 会场码率选择dialog
            showSwitchConfBR() {
                this.isShowSwitchConfBR = !this.isShowSwitchConfBR;
            },

            // 设置会场最大码率
            switchConfBR(br) {
                this.isShowSwitchConfBR = false;
                this.confBr = br;
                let _this = this;
                tvvssdk.reconfigConf(this.sessionIds.main, this.roomId,this.confSize, this.confBr, this.confFPS, function (res) {
                    if (res.success) {
                        _this.$message.warning("码率设置成功");
                        console.log(TAG, res);
                    } else {
                        _this.$message.warning("码率设置失败");
                    }
                });
            },

            //会场帧率选择dialog
            showSwitchConfFPS() {
                this.isShowSwitchConfFPS = !this.isShowSwitchConfFPS;
            },
            // 设置会场帧率
            switchConfFPS(fps) {
                this.isShowSwitchConfFPS = false;
                this.confFPS = fps;
                let _this = this;
                tvvssdk.reconfigConf(this.sessionIds.main,this.roomId, this.confSize, this.confBr, this.confFPS, function (res) {
                    if (res.success) {
                        //最好设置下相对应的码率,360P 1000kbp/s   720 2000kbp/s 1080 3000 kbps/s
                        _this.$message.warning("码率设置成功");
                        console.log(TAG, res);
                    } else {
                        _this.$message.warning("码率设置失败");
                    }
                });
            },

            // 开关麦克风
            clickMike() {
                let _this = this;
                if (this.deviceInfo.microphone === "0") {
                    tvvssdk.streamStop(this.sessionIds.main)
                    this.mikeStart(this.sessionIds.main)
                    this.btnStatus.mikeStatus = true
                    this.deviceInfo.microphone = "1"
                }else {
                    this.btnStatus.mikeStatus = !this.btnStatus.mikeStatus;
                    let enable = this.btnStatus.mikeStatus;
                    tvvssdk.mike(this.sessionIds.main, enable, function (res) {
                        if (!res.success) {
                            _this.$message.warning("静音异常");
                            _this.btnStatus.mikeStatus = !_this.btnStatus.mikeStatus;
                        }
                        console.log(TAG, res);
                    });
                }
            },
            mikeStart(sessionId) {

                let options = {
                    audio: {},   //音频参数
                    video: {},   //视频参数
                    conf: {}
                };
                //设置音频参数
                options.audio.sendaudio = true;
                options.audio.recvaudio = true;
                options.audio.publishaudio = true;
                options.audio.subscribeaudio = true;
                options.audio.audioindeviceid = true;

                //设置视频参数
                options.video.sendvideo = false;
                options.video.recvvideo = false;
                options.video.deviceid = this.name;
                options.video.publishvideo = false;
                options.video.subscribevideo = false;
                this.btnStatus.publishStatus = false;
                options.video.type = "camera";

                //设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size;
                options.conf.fps = this.deviceInfo.fps;
                options.conf.confsize = this.deviceInfo.confsize;
                options.conf.confminbr = this.deviceInfo.confminbr;
                options.conf.confmaxbr = this.deviceInfo.confmaxbr;
                options.conf.confinitbr = this.deviceInfo.confmaxbr;
                options.conf.conffps = this.deviceInfo.conffps;
                options.conf.mode = this.deviceInfo.confmode;
                options.conf.picmode = 0;  //0：一大多小， 1：等大

                let _this = this;
                let callbacks = {
                    onlocalstream: function (sessionId, stream, extra) {
                    },
                    onremotestream: function (sessionId, stream, extra) {
                        console.log(TAG, "onremotestream");
                        let index = 0;
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = _this.roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        _this.getConfMemberNum();
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 200);
                    },
                };
                tvvssdk.streamStart(sessionId, options, this.roomId, callbacks);
                this.streaming = true;

            },
            publishStart(sessionId) {

                let options = {
                    audio: {},   //音频参数
                    video: {},   //视频参数
                    conf: {}
                };
                //设置音频参数
                options.audio.sendaudio = true;
                options.audio.recvaudio = true;
                options.audio.publishaudio = true;
                options.audio.subscribeaudio = true;
                options.audio.audioindeviceid = true;
                this.deviceInfo.microphone = "1"
                //设置视频参数
                options.video.sendvideo = true;
                options.video.recvvideo = true;
                options.video.deviceid = this.deviceInfo.camera;
                options.video.publishvideo = true;
                options.video.subscribevideo = true;
                this.btnStatus.publishStatus = true;
                options.video.type = "camera";

                //设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size;
                options.conf.fps = this.deviceInfo.fps;
                options.conf.confsize = this.deviceInfo.confsize;
                options.conf.confminbr = this.deviceInfo.confminbr;
                options.conf.confmaxbr = this.deviceInfo.confmaxbr;
                options.conf.confinitbr = this.deviceInfo.confmaxbr;
                options.conf.conffps = this.deviceInfo.conffps;
                options.conf.mode = this.deviceInfo.confmode;
                options.conf.picmode = 0;  //0：一大多小， 1：等大

                let _this = this;
                let callbacks = {
                    onlocalstream: function (sessionId, stream, extra) {
                    },
                    onremotestream: function (sessionId, stream, extra) {
                        console.log(TAG, "onremotestream");
                        let index = 0;
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = _this.roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        _this.getConfMemberNum();
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 200);
                    },
                };
                tvvssdk.streamStart(sessionId, options, this.roomId, callbacks);
                this.streaming = true;

            },
            // 开关摄像头
            clickPublish() {
                let _this = this;
                // 初始化禁用摄像头再开启摄像头，需重新设置推流信息
                if (this.deviceInfo.camera === "0"){
                    this.deviceInfo.camera = "1"
                    tvvssdk.streamStop(this.sessionIds.main)
                    this.publishStart(this.sessionIds.main)
                    this.btnStatus.publishStatus = true
                } else {
                    this.btnStatus.publishStatus = !this.btnStatus.publishStatus;
                    let enable = this.btnStatus.publishStatus;
                    console.log(MLog);
                    console.log(TAG, this.videoList);
                    tvvssdk.publish(this.sessionIds.main, enable, function (res) {
                        if (!res.success) {
                            _this.$message.warning("摄像头设置异常");
                            _this.btnStatus.publishStatus = !_this.btnStatus.publishStatus;
                            // _this.btnUiShow();
                            // _this.setVideoStatus(_this.name, "5", enable);
                        } else {
                            if (enable === true && _this.btnStatus.shareScreenStatus) {
                                _this.btnStatus.shareScreenStatus = false;
                            }
                        }
                        console.log(TAG, res);
                    });
                }
            },
            screenhStart(sessionId) {

                let options = {
                    audio: {},   //音频参数
                    video: {},   //视频参数
                    conf: {}
                };
                //设置音频参数
                options.audio.sendaudio = true;
                options.audio.recvaudio = true;
                options.audio.publishaudio = true;
                options.audio.subscribeaudio = true;
                options.audio.audioindeviceid = true;

                //设置视频参数
                options.video.sendvideo = true;
                options.video.recvvideo = true;
                options.video.deviceid = this.deviceInfo.camera;
                options.video.publishvideo = true;
                options.video.subscribevideo = true;
                this.btnStatus.publishStatus = true;
                options.video.type = "screen";

                //设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size;
                options.conf.fps = this.deviceInfo.fps;
                options.conf.confsize = this.deviceInfo.confsize;
                options.conf.confminbr = this.deviceInfo.confminbr;
                options.conf.confmaxbr = this.deviceInfo.confmaxbr;
                options.conf.confinitbr = this.deviceInfo.confmaxbr;
                options.conf.conffps = this.deviceInfo.conffps;
                options.conf.mode = this.deviceInfo.confmode;
                options.conf.picmode = 0;  //0：一大多小， 1：等大

                let _this = this;
                let callbacks = {
                    onlocalstream: function (sessionId, stream, extra) {
                    },
                    onremotestream: function (sessionId, stream, extra) {
                        console.log(TAG, "onremotestream");
                        let index = 0;
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = _this.roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        _this.getConfMemberNum();
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 200);
                    },
                };
                tvvssdk.streamStart(sessionId, options, this.roomId, callbacks);
                this.streaming = true;

            },
            // 共享屏幕
            shareScreen() {
                // 初始化禁用摄像头再开启摄像头，需重新设置推流信息
                if (this.deviceInfo.camera === "0"){
                    this.deviceInfo.camera = "1"
                    tvvssdk.streamStop(this.sessionIds.main)
                    this.screenhStart(this.sessionIds.main)
                    this.btnStatus.shareScreenStatus = true;
                }else {
                    let _this = this;
                    this.btnStatus.shareScreenStatus = !this.btnStatus.shareScreenStatus;
                    let enable = this.btnStatus.shareScreenStatus;
                    // let index = this.getVideoListIndexByRemoteIndex("localVideo");
                    // console.log(index);
                    //
                    // console.log(enable);
                    // console.log(this.videoList);
                    // if (!_this.btnStatus.publishStatus) {
                    //   console.log(TAG, "摄像头关闭");
                    //   if (enable) {
                    //     console.log(TAG, "开启屏幕共享");
                    //     console.log(this.videoList[index].extra.video);
                    //     this.videoList[index].extra.video = true;
                    //     console.log(this.videoList[index].extra.video);
                    //   } else {
                    //     console.log(TAG, "关闭屏幕共享");
                    //     this.videoList[index].extra.video = false;
                    //   }
                    // }
                    // console.log(this.videoList);
                    tvvssdk.shareScreen(this.sessionIds.main, enable, function (res) {
                        if (res.success) {
                            // _this.btnUiShow();
                            if (enable === true && _this.btnStatus.publishStatus) {
                                _this.btnStatus.publishStatus = false;
                            }
                        } else if (res.isSources) {
                            var options = []
                            _this.sourceList = res.sources
                            _this.sourceCallback = res.sourcesCallback

                            _this.sourecDialogVisible = true
                            console.log('isSources==============', res)
                            console.log('isSources==============', _this.sourceList)
                            console.log('isSources==============', _this.sourceCallback)
                        }
                        console.log(TAG, res);
                    });
                }
            },

            // 切换全屏
            clickSwitchFullScreen(status) {
                if (status) {
                    this.isFullScreen = false;
                    this.switchFullScreen();
                } else {
                    this.isFullScreen = true;
                    this.switchFullScreen();
                }
            },
            // 全屏
            switchFullScreen() {
                var element = document.documentElement;
                this.isFullScreen = !this.isFullScreen;
                if (this.isFullScreen) {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {
                        // 兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {
                        // 兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {
                        // 兼容IE
                        element.msRequestFullscreen();
                    }
                    // setTimeout(this.reloadStream, 50);
                } else {
                    // $('body').removeClass('full-screen');
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    console.log(MLog);
                    console.log(TAG, this.videoList);
                    // setTimeout(this.reloadStream, 200);
                }
            },
            //右侧功能
            // 发送文字消息
            sendMsg() {
                let _this = this;
                if (this.sendMsgContent.trim() === "" || this.sendMsgContent === null) {
                    return;
                }
                let content = this.sendMsgContent;
                if (this.videoList[0].sessionid !== -1) {
                    tvvssdk.sendGroupData(this.sessionIds.main, this.roomId, this.name, "all", content, function (res) {
                        if (res.success) {
                            // _this.$message.success("发送文字消息成功");
                            _this.addMsgList(_this.name, _this.sendMsgContent);
                            // 临时注销
                            _this.sendMsgContent = "";
                        }
                        console.log(TAG, res);
                    });
                }

            },
            // 群发上传文件的消息
            sendUploadFileMsg(data) {
                // let _this = this;
                tvvssdk.sendGroupData(this.sessionIds.main, this.name, data, function (res) {
                    if (res.success) {
                        // _this.$message.success("发送上传文件消息成功");
                    }
                });
            },
            // 下载文件
            downFile(url) {
                // let elemIF = document.createElement("iframe");
                // elemIF.src = url;
                // elemIF.style.display = "none";
                // document.body.appendChild(elemIF);
                window.open(url);
            },
            // 添加消息列表内容，UI顯示
            addMsgList(name, content) {
                this.msgList.push({
                    name: name,
                    content: content
                });
                if (this.activeTabs !== "2") {
                    this.newMsg = true;
                }
            },
            // 切換tabs的事件
            tabClick(tab) {
                if (tab.name === "2") {
                    this.newMsg = false;
                } else if (tab.name === "3") {
                    this.newFile = false;
                }
            },

            // 查询文件列表
            queryFiles() {
                let url = "/file/queryfiles/?room=";
                let params = {};
                this.axios.hGet(url + this.roomId, params, response => {
                    console.log(TAG, response);
                    if (response.data && response.data.length !== 0) {
                        this.fileList = response.data;
                    }
                });
            },
            // 删除文件
            deleteFile(fileId) {
                let url = "/file/delete/";
                let params = {};
                this.axios.hPost(url + fileId, params, response => {
                    console.log(TAG, response);
                    if (response.status === 200) {
                        this.$message.success("文件删除成功");
                        this.queryFiles();
                    }
                });
            },
            //上传文件
            uploadFile() {
                let _this = this;
                let url = "/file/preview";
                let params = new FormData();
                console.log(TAG, this.uploadFiles);
                console.log(TAG, this.uploadFiles[0]);
                params.append("file", this.uploadFiles[0].raw);
                params.append("userName", this.name);
                params.append("room", this.roomId);

                this.axios.formPost(url, params, response => {
                    this.$refs.upload.clearFiles();
                    if (response.status === 200) {
                        console.log(TAG, response);
                        this.$message.success("文件上传成功");
                        this.isUpload = false;
                        let content = {
                            data: {
                                fileHtml: response.data.htmlUrl,
                                fileName: _this.uploadFiles[0].name,
                                fileSize: _this.uploadFiles[0].size,
                                fileType: response.data.type,
                                fileUrl: response.data.loadUrl
                            },
                            operation: "file"
                        };
                        this.sendUploadFileMsg(content);
                        this.queryFiles();
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            },

            // 刷新28181摄像头
            refreashCamera() {
                let _this = this;
                tvvssdk.queryDevice(this.sessionIds.main, function (res) {
                    if (res.success) {
                        _this.cameraList = res.devices;
                    }
                });
            },

            //28181摄像头推流
            inviteCamera(cameraId) {
                let _this = this;
                tvvssdk.invite28181(this.sessionIds.main, cameraId, function (res) {
                    if (res.success) {
                        _this.refreashCamera(_this.sessionIds.main);
                    }
                });
            },

            //28181摄像头停止推流
            byeCamera(cameraId) {
                let _this = this;
                tvvssdk.bye28181(this.sessionIds.main, cameraId, function (res) {
                    if (res.success) {
                        _this.refreashCamera(_this.sessionIds.main);
                    }
                });
            },

            // 上传文件相关
            handleUploadChange(file, fileList) {
                console.log(TAG, file);
                console.log(TAG, fileList);
                this.uploadFiles = fileList;
                this.uploadFileName = file.name;
                let extList = file.name.split(".");
                let ext = extList[extList.length - 1];
                this.uploadingFile = {
                    fileType: ext,
                    fileName: file.name
                };
                console.log(ext);
                this.isUpload = true;
                this.uploadFile();
            },

            // 全景展开
            switchVrDeveloped() {
                this.isVrDeveloped = !this.isVrDeveloped;
                let _this = this;
                if (this.isVrDeveloped) {
                    console.log(TAG, THREE);
                    window.THREE = THREE; // 重要，不设置则会报THREE未定义错误！！！！！！
                    let videoTag = document.getElementById(_this.videoList[0].video);
                    container = document.getElementById("container-vr");
                    renderer = new THREE.WebGLRenderer();
                    container.appendChild(renderer.domElement);
                    let scene = new THREE.Scene();
                    let geometry = new THREE.SphereBufferGeometry(200, 60, 40);
                    geometry.scale(-1, 1, 1);
                    let texture = new THREE.VideoTexture(videoTag);

                    let material = new THREE.MeshBasicMaterial({
                        map: texture
                    });
                    let mesh = new THREE.Mesh(geometry, material);
                    scene.add(mesh);
                    vr = new VR(scene, renderer, container);

                    vr.init(function () {
                    });
                } else {
                    container.removeChild(renderer.domElement);
                    renderer.dispose();
                    renderer.forceContextLoss();
                    renderer.context = null;
                    renderer.domElement = null;
                    renderer = null;
                }
            },

            // 工具
            checkIsNumber(str) {
                let reg = /^[0-9]*$/;
                if (reg.test(str)) {
                    return true;
                }
                return false;
            },
            getArray(min, max) {
                let arr = new Array();
                let i = parseInt(min);
                while (i < max) {
                    arr.push(i);
                    i++;
                }
                return arr;
            },
            getAuthCode() {
                this.authTime = 0;
                this.authTimeTimer = setInterval(() => {
                    this.authTime++;
                    this.videoCurrentTime = this.$secondsFormat(this.authTime);
                }, 1000);
            },
            sourceClick(){
                this.sourecDialogVisible = true
            },
            sourceConfirm(){
                this.sourecDialogVisible = false
                this.sourceCallback(true, this.sourecId)
            },
            sourceCancel(){
                this.sourecDialogVisible = false
                this.sourceCallback(false, '')
            },
            // 创建链接加入房间
            createAuxiConnection() {
                var _this = this
                // 切换布局
                this.isSolo = false
                this.dynamicLayout()
                if (this.videoIndex === 9) return
                for (let i = 1; i < 8; i++) {
                    tvvssdk.createConnection(function(res) {
                        if (res.success) {
                            console.log("createAuxiConnection--------", "创建成功："+res.sessionid);
                            _this.joinAuxiRoom(res.sessionid, "第"+_this.videoIndex+"个新房间", _this.name + _this.videoIndex, _this.videoIndex)
                            _this.videoIndex++
                        }  else if (res.disconnected) {
                            console.log("createAuxiConnection--------", "ICE连接失败：正在重新连接",res.sessionid);
                            tvvssdk.streamStop(res.sessionid)
                            _this.StreamStartAuxi(res.sessionid,  _this.name + _this.videoIndex, _this.videoIndex)
                        } else {
                            console.log('createAuxiConnection==============', res.msg)
                        }
                    })
                }
            },
            addAuxiConnection() {
                // 限制画面个数
                if (this.videoIndex === 8) return
                this.$prompt('请输入房间号', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '房间号不能为空'
                }).then(({ value }) => {
                    this.videoIndex++
                    var _this = this
                    // 切换布局
                    this.isSolo = false
                    this.dynamicLayout()
                    tvvssdk.createConnection(function(res) {
                        if (res.success) {
                            console.log("createAuxiConnection--------", "创建成功："+res.sessionid);
                            _this.joinAuxiRoom(res.sessionid, value, _this.name + _this.videoIndex, _this.videoIndex)
                        } else if (res.disconnected) {
                            console.log("createAuxiConnection--------", "ICE连接失败：正在重新连接",res.sessionid);
                            tvvssdk.streamStop(res.sessionid)
                            _this.StreamStartAuxi(res.sessionid,  _this.name + _this.videoIndex, _this.videoIndex)
                        } else {
                            console.log('createAuxiConnection==============', res.msg)
                        }
                    })
                }).catch(() => {

                })
            },
            // 加入房间
            joinAuxiRoom(sessionid, roomId, name, index) {
                const _this = this
                const callbacks = {
                    onjoined: function(name) {
                        console.log(TAG, name + ' has joined')
                        console.log("joinAuxiRoom:sessionid" +sessionid, index)
                        _this.StreamStartAuxi(sessionid, roomId, index)
                    },
                    onleave: function(name, rfindex) {
                        console.log(TAG, name + ' has leaved')
                    },
                    ondata: function(sender, platform, data) {
                        console.log(MLog)
                        console.log(TAG, data)
                        _this.addMsgList(sender, data)
                    },
                    repeatLogin: function (msg) {
                        _this.$message.success("用户重复登录");
                    }
                }
                tvvssdk.joinRoom(sessionid, roomId, name, callbacks)
            },
            joinAuxiOtherRoom(sessionid, roomId, name, index) {
                const _this = this
                const callbacks = {
                    onjoined: function(name) {
                        console.log(TAG, name + ' has joined')
                        console.log("joinAuxiRoom:sessionid" +sessionid, index)
                        _this.StreamStartOtherAuxi(sessionid, roomId, index)
                    },
                    onleave: function(name, rfindex) {
                        console.log(TAG, name + ' has leaved')
                    },
                    ondata: function(sender, platform, data) {
                        console.log(MLog)
                        console.log(TAG, data)
                        _this.addMsgList(sender, data)
                    },
                    repeatLogin: function (msg) {
                        _this.$message.success("用户重复登录");
                    }
                }
                tvvssdk.joinRoom(sessionid, roomId, name, callbacks)
            },
            StreamStartOtherAuxi(sessionid, roomId, index) {
                console.log("StreamStartOtherAuxi=:sessionid" +sessionid, index)
                const options = {
                    audio: {}, // 音频参数
                    video: {}, // 视频参数
                    conf: {}
                }
                // 设置音频参数
                options.audio.sendaudio = false // 未选择”禁用麦克风“
                options.audio.recvaudio = false
                options.audio.publishaudio = false
                options.audio.subscribeaudio = false
                this.deviceInfo.microphone = "1"
                // 设置视频参数
                options.video.sendvideo = false // 未选择”禁用摄像头“
                options.video.recvvideo = true
                options.video.deviceid = this.name + index
                options.video.publishvideo = false
                options.video.subscribevideo = true
                options.video.type = 'camera'

                // 设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size
                options.conf.fps = this.deviceInfo.fps
                options.conf.confsize = this.deviceInfo.confsize
                options.conf.confminbr = this.deviceInfo.confminbr
                options.conf.confmaxbr = this.deviceInfo.confmaxbr
                options.conf.confinitbr = this.deviceInfo.confmaxbr
                options.conf.conffps = 15
                options.conf.mode = 0
                options.conf.picmode = 1 // 0：一大多小， 1：等大

                const _this = this
                const callbacks = {
                    onlocalstream: function(sessionId, stream, extra) {
                        console.log(TAG, 'onlocalstream')
                    },
                    onremotestream: function(sessionId, stream, extra) {
                        console.log("onremotestream StreamStartOtherAuxi:sessionid" +sessionId, index)
                        console.log(TAG, 'onremotestream', index)
                        console.log(TAG + 'extra', extra)
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 500);
                    },
                    onleave: function(name, rfindex) {
                    },
                    ondata: function(sender, platform, data) {
                        console.log(MLog)
                        console.log(TAG, data)
                        _this.addMsgList(sender, data)
                    },
                    onsharescreen: function(status) {
                        // alert(status)
                    }
                }
                tvvssdk.streamStart(sessionid, options, roomId, callbacks)
            },
            StreamStartAuxi(sessionid, roomId, index) {
                console.log("StreamStartAuxi=:sessionid" +sessionid, index)
                const options = {
                    audio: {}, // 音频参数
                    video: {}, // 视频参数
                    conf: {}
                }
                // 设置音频参数
                options.audio.sendaudio = false // 未选择”禁用麦克风“
                options.audio.recvaudio = false
                options.audio.publishaudio = false
                options.audio.subscribeaudio = false
                this.deviceInfo.microphone = "1"
                // 设置视频参数
                options.video.sendvideo = true // 未选择”禁用摄像头“
                options.video.recvvideo = true
                options.video.deviceid = this.name + index
                options.video.publishvideo = true
                options.video.subscribevideo = true
                options.video.type = 'camera'

                // 设置会场参数，仅对MCU会议有效
                options.conf.size = this.deviceInfo.size
                options.conf.fps = this.deviceInfo.fps
                options.conf.confsize = this.deviceInfo.confsize
                options.conf.confminbr = this.deviceInfo.confminbr
                options.conf.confmaxbr = this.deviceInfo.confmaxbr
                options.conf.confinitbr = this.deviceInfo.confmaxbr
                options.conf.conffps = 15
                options.conf.mode = 2
                options.conf.picmode = 1 // 0：一大多小， 1：等大

                const _this = this
                const callbacks = {
                    onlocalstream: function(sessionId, stream, extra) {
                        console.log(TAG, 'onlocalstream')
                    },
                    onremotestream: function(sessionId, stream, extra) {
                        console.log("onremotestream StreamStartAuxi:sessionid" +sessionId, index)
                        console.log(TAG, 'onremotestream', index)
                        console.log(TAG + 'extra', extra)
                        _this.videoList[index].stream = stream;
                        _this.videoList[index].index = index;
                        _this.videoList[index].name = roomId;
                        _this.videoList[index].show = true;
                        _this.videoList[index].extra = extra;
                        _this.videoList[index].sessionid = sessionId;
                        _this.videoList[index].video = "video"+index;
                        setTimeout(function () {
                            _this.reloadIndexStream(index);
                        }, 200);
                    },
                    onleave: function(name, rfindex) {
                    },
                    ondata: function(sender, platform, data) {
                        console.log(MLog)
                        console.log(TAG, data)
                        _this.addMsgList(sender, data)
                    },
                    onsharescreen: function(status) {
                        // alert(status)
                    }
                }
                tvvssdk.streamStart(sessionid, options, roomId, callbacks)
            },
            reloadIndexAuxiStream(index) {
                tvvssdk.attachMediaStream(
                    document.getElementById(this.videoList[index].video),
                    this.videoList[index].stream
                );
            },
            nextPage(){
                // 判断用户数是否大于9
                // 关闭前三个拉流 排除自己的房间
                // 在拉取后面的视频流
                // 视频显示通过三队列进行保存
            }
        },
        watch: {
            confMemberNum: function () {
                console.log(TAG, this.videoList);
                console.log(TAG, this.confMemberNum);
                this.dynamicLayout();
            }
        }
    };
</script>

